import React, { Component } from 'react';
import '../styles/class/ClassifySearch.scss';
// import { index_goodlist } from '../api/index';
import { withRouter } from 'react-router-dom';
import { NavBar } from 'antd-mobile';
import * as service from '../api/index';
import TopBox from '../components/TopBox';

class ClassifySearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodlist: []
        }
    }
    componentDidMount() {
        console.log(this.props.location.state.id);
        console.log(this.props.location.state.name);

        service.good_list({ id: this.props.location.state.id }).then((res) => {
            console.log(res.data);

            //保存商品详情
            this.setState({ goodlist: res.data.list })
            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.list = res.data.list
            console.log(res.data.list);
        })
        // index_goodlist().then((res) => {
        //     console.log(res.data);
        //     this.setState({ bannerlist: res.data.list });
        //     // eslint-disable-next-line react/no-direct-mutation-state
        //     this.state.goodlist = res.data.list
        // })
    }
    back() {
        //返回上一个路由
        this.props.history.go(-1);
    }
    toDetail(id) {
        this.props.history.push('/details/' + id);
    }
    render() {
        return (
            <div className='ClassifySearch'>
                {<TopBox/>}
                {/* 分类搜索 */}
                {/* <ClassSearch/> */}
                <NavBar onBack={() => { this.back() }}>{this.props.location.state.name}</NavBar>
                {/* 分类搜索列表 */}
                <div className='ClassifySearch_box'>
                    {
                        this.state.goodlist.map((item, index) => {
                            return (
                                <div className='ClassifySearch_item' key={index} onClick={() => { this.toDetail(item.id) }}>
                                    <img src={item.pic} alt="" />
                                    <div className='ClassifySearch_itemBox'>
                                        <div className='ClassifySearch_itemBox_name'><span>{item.brand}</span>{item.name}</div>
                                        <div className='ClassifySearch_itemBox_priceBox'>{item.salesPrice.name}￥<span className='ClassifySearch_itemBox_newPrice'>{item.salesPrice.value}</span></div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(ClassifySearch);